<template>
	<view class="container">
		<!-- 标题 -->
		<headTitle title="优惠券" :mine="true"></headTitle>
		<view class="cart-op" v-if="this.couponList.length>0 && !isEmpty">
			<text class="cart font28 color666" @tap="editOp">{{ edit ? '完成' : '编辑' }}</text>
		</view>
		<view class="navbar bgfff flex-center-between">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" 
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>

		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" :class="{'bottom': edit}" scroll-y @scrolltolower="loadData()">
					<!-- 空白页 -->
					<empty :title="navList[tabCurrentIndex].empty" v-if="isEmpty"></empty>
					
					<view class="flex-center" v-for="(item, index) in couponList" :key="index">
						<view class="select" :class="{'active': item.flag}" v-show="edit" @tap="check(index)">
							<image class="icon-active img-size-repeat" v-show="item.flag"></image>
						</view>
						<allCoupon class="default" :class="{'edit': edit}" :alldata="item"></allCoupon>
					</view>
					
					<uni-load-more :status="loadingType" :contentText="contentText" v-if="!isEmpty"></uni-load-more>
				</scroll-view>

			</swiper-item>
		</swiper>
		<view class="bottom-op bgfff flex-center-between" v-show="this.couponList.length>0 && edit">
			<view class="flex-center" @tap="allcheck">
				<view class="select" :class="{'active': allChecked}">
					<image class="icon-active img-size-repeat" v-show="allChecked"></image>
				</view>
				<view class="font26 color666">全选</view>
			</view>
			<button class="delBtn bgfff font28" @tap="delShop">删除</button>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import empty from '@/components/empty'
import allCoupon from '@/components/allCoupon'
export default {
	components: {
		headTitle,
		uniLoadMore,
		empty,
		allCoupon,
	},
	data() {
		return {
			allChecked: false, // 全选
			edit: false, // 是否在编辑
			isEmpty: false, // 不为空
			contentText: {contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "已经是最后一张优惠券了"},
			tabCurrentIndex: 0,
			pageNum: 1,
			couponList:[],
			selectArr: [], // 选中的数据
			loadingType: 'loading', //加载更多状态
			navList: [
				{
					type: 0,
					text: '未使用',
					empty: '您还没有未使用的优惠券'
				},
				{
					type: 1,
					text: '已使用',
					empty: '您还没有已使用的优惠券'
				},
				{
					type: 2,
					text: '已失效',
					empty: '您还没有已失效的优惠券'
				}
			]
		};
	},

	onLoad(options) {
		/**
		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
		 * 替换onLoad下代码即可
		 */
		if (options && options.type) {
			this.tabCurrentIndex = +options.type;
		}
		this.loadData()
	},
	methods: {
		// 删除收藏商品
		delShop() {
			if(this.selectArr.length === 0) {
				this.$api.msg('请选择删除的优惠券')
				return
			}
			uni.showModal({
				content: '确定要删除吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						let res = await Api.apiCall('get', Api.coupon.delCoupon, {ids: this.selectArr.toString()}, true)
						if(res) {
							this.$api.msg('删除成功')
							this.handleDel()
						}
					}
				}
			})
		},
		// 处理删除
		handleDel() {
			let arr = []
			this.selectArr.map(item => {
				this.couponList.some((val, index) => {
					if(val.id === item) {
						arr.push(index)
						return true
					}
				})
			})
			arr.sort().reverse().map(item => {
				this.couponList.splice(item, 1)
			})
			this.editOp()
		},
		// 选中商品
		check(idx) {
			let val = this.couponList[idx]
			let f = !val.flag
			this.$set(this.couponList[idx], 'flag', f)
			// 选中或取消选中
			f ?  this.selectArr.push(val.id) : this.selectArr.splice(this.couponList.indexOf(val.id), 1)
			// 设置全选或反选
			this.allChecked = this.selectArr.length === this.couponList.length ? true : false
		},
		// 全选反选
		allcheck() {
			this.allChecked = !this.allChecked
			this.couponList && this.couponList.map(item => {
				this.$set(item, 'flag', this.allChecked)
			})
			if(this.allChecked) {
				this.selectArr = []
				this.couponList.map(item => {
					this.selectArr.push(item.id)
				})
			}else {
				this.selectArr = []
			}
		},
		// 初始化数据
		init() {
			this.edit = false
			this.allChecked = false
			this.selectArr = []
		},
		//获取订单列表
		async loadData(type = 'add') {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex
			let navItem = this.navList[index]
			let status = navItem.type

			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			} else {
				// 没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'loading'
					// this.loadingType = 'more'
				}
				
				let params = { pageIndex: this.pageNum, pageSize: 10, useStatus: status }
				
				let isLoading = false
				if (type === 'refresh') {
					this.isEmpty = false
					this.couponList = []
					isLoading = true
				}
				let data = await Api.apiCall('get', Api.coupon.getAllCoupon, params, isLoading)
				if (type === 'refresh') {
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1000)
				}
				if(!data) return
				let couponList = data.recordList
				this.couponList = this.couponList.concat(couponList)
				
				// 如果全选是选中时
				if(this.allChecked) {
					this.selectArr = []
					this.couponList.map(item => {
						this.$set(item, 'flag', this.allChecked)
						this.selectArr.push(item.id)
					})
				}
				
				if(this.couponList.length === 0) {
					// 显示无相关订单
					this.isEmpty = true
				}

				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = data.hasMore == 0 ? 'nomore' : 'more'
				
				this.pageNum += 1
			}
		},

		//swiper 切换
		changeTab(e) {
			this.init()
			this.tabCurrentIndex = e.target.current
			this.pageNum =  1
			this.loadData('refresh')
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index
		},
		// 点击编辑
		editOp() {
			this.edit = !this.edit
			// 全部取消
			if(!this.edit) {
				this.couponList.map(item => {
					this.$set(item, 'flag', false)
				})
				this.selectArr = []
				this.allChecked = false
			}
		},
	}
};
</script>

<style lang="scss">
page,
.container {
	background-color: #F7F7F7;
	height: 100%;
}

.cart-op {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	height: 88rpx;
	line-height: 88rpx;
	.cart {
		width: 70rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin-right: 30rpx;
		letter-spacing: 1rpx;
	}
}

.swiper-box {
	height: calc(100% - 90rpx);
}
.list-scroll-content {
	padding-top: 30rpx;
	height: 100%;
	&.bottom {
		padding-bottom: 110rpx;
	}
	.select {
		position: absolute;
		left: 30rpx;
	}
	.default {
		transition: all .3s;
		&.edit {
			transform: translateX(62rpx);
		}
	}
}

.navbar {
	height: 90rpx;
	padding: 0 40rpx;
	position: relative;
	border-bottom: 1rpx solid #eee;
	z-index: 10;
	.nav-item {
		height: 100%;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #AEA8A2;
		position: relative;
		&.current {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				background-color: #333;
				border-radius: 5rpx;
			}
		}
	}
}

.select {
	position: relative;
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	border: 2rpx solid #DDD;
	margin-right: 20rpx;
	&.active {
		border: 0;
	}
	.icon-active {
		position: absolute;
		top: 0;
		left: 0;
		width: 42rpx;
		height: 42rpx;
		background-image: url('/static/image/cartselect.png');
	}
}

.bottom-op {
	padding: 0 30rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 110rpx;
	.delBtn {
		width: 186rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 1rpx solid #C84739;
		border-radius: 40rpx;
		color: #C84739;
		padding: 0;
		margin: 0;
		&::after {
			border: 0;
		}
	}
}

.uni-swiper-item {
	height: auto;
}

/* load-more */
.uni-load-more {
	margin-top: 20rpx;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	height: 80upx;
	align-items: center;
	justify-content: center;
}
</style>
